<!DOCTYPE html> 
<html>
  <head>
    <!--META-->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=0.75">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">

    <!--CSS-->
    <link rel="stylesheet" href="API/css/themes/default/jquery.mobile.min.css" />
    <!--<link rel="stylesheet" href="API/css/datatables/css/jquery.dataTables.css"/>--> 
    <link rel="stylesheet" href="API/css/mycss.css" />
    <link rel="stylesheet" href="css/mycss.css" />

    <!--JS-->
    <script type="text/javascript" src="API/js/jquery.min.js"></script>
    <script type="text/javascript" src="API/js/jquery.mobile.min.js"></script>
    <!--<script type="text/javascript" src="API/js/highcharts.js"></script>-->
    <!--<script type="text/javascript" src="API/js/modules/exporting.js"></script>-->
    <!--<script type="text/javascript" src="API/js/jquery.dataTables.min.js"></script>--> 
    <script type="text/javascript" src="include/config.js"></script>
    <script type="text/javascript" src="API/js/fonctions.js"></script>
    <script type="text/javascript" src="js/fonctions.js"></script>

    <script language="javascript" type="text/javascript">
    checkMaintenance();
    checkAuthentification();
	
    ///////////////////
    //BLOCK VARIABLE GLOBAL
    ///////////////////
    var id_page = 100;
    var g_tab_testInput = new Array(); 
    g_tab_testInput["titre"]=false; 
    g_tab_testInput["dateParution"]=false; 
    var g_couleurFontBon = "#04B404";
    var g_couleurFontMauvais = "#FF0000";
    var g_couleurFontDefaut = "#333333";
    var g_couleurFontTips = "#a1a1a1";

    ///////////////////
    //BLOCK FONCTIONS EVENEMENTS
    ///////////////////
    $(document).on('pageinit',function() {
        try {
            // Init commmun
            init_commun();

            // Init page
            afficheLivres();
        } catch (er) {
            log(0, "ERROR(init_home):" + er.message);
        }
    });

    $(document).on('pageshow',function() {
        try {
            // Fin affichage commun
            show_commun();
        } catch (er) {
            log(0, "ERROR(show):" + er.message);
        }
    });

    //Fin chargement page
    function OnLoad() {
        try {
            // Fin chargement
        } catch (er) {
            log(0, "ERROR(OnLoad):" + er.message);
        }
    }
    
    function ecoute(p_obj, p_eventCode) {
        try {
            switch (p_eventCode) { 
                case 13: 
                    onblurInput(p_obj);
                    break; 
                default: 
                    break; 
            }
        } catch (er) {
            log(0, "ERROR(ecoute):" + er.message);
        }
    }

    function onblurInput(p_obj) {
        try {
            $("#tips_"+p_obj.name).text("");
            
            switch (p_obj.name) {
                case "titre" : 
                    var Model = new RegExp("^[a-zA-Záàâäéèêç\\-\\' 1-9]{2,}$", "g");
                    var test = p_obj.value.match(Model);
                    if(test != null){
                        $("#label_"+p_obj.name).css("color", g_couleurFontBon);
                        g_tab_testInput[p_obj.name]=true;
                    }else{
                        $("#label_"+p_obj.name).css("color", g_couleurFontMauvais);
                        g_tab_testInput[p_obj.name]=false;
                    }
                    break;
                case "dateParution" : 
                    var Model = new RegExp("^[0-9]{2,2}/[0-9]{2,2}/(19|20)[0-9]{2,2}$", "g");
                    var test = p_obj.value.match(Model);
                    if(test != null){
                        $("#label_"+p_obj.name).css("color", g_couleurFontBon);
                        g_tab_testInput[p_obj.name]=true;
                    }else{
                        $("#label_"+p_obj.name).css("color", g_couleurFontMauvais);
                        g_tab_testInput[p_obj.name]=false;
                    }
                    break;
                default: 
                    break; 
            }
        } catch (er) {
            log(0, "ERROR(checkIntput):" + er.message);
        }
    }

    function onfocusInput(p_obj) {
        try {
            $("#label_"+p_obj.name).css("color", g_couleurFontDefaut);
            $("#tips_"+p_obj.name).css("color", g_couleurFontTips);
            $("#msgRetour").text("");

            switch (p_obj.name) {
                case "titre" :
                    $("#tips_"+p_obj.name).html("Que des caract&egrave;res et &agrave; minima de deux lettres.");
                    break;
                case "dateParution" : 
                    $("#tips_"+p_obj.name).html("Format attendu dd/mm/yyyy.");
                    break;
                default: 
                    break; 
            }
        } catch (er) {
            log(0, "ERROR(onfocusInput):" + er.message);
        }
    }
		
    ///////////////////
    //BLOCK FONCTIONS METIER
    ///////////////////
    function afficheLivres(){
        try {
            var tabInput = { id:"", order:"id", orderSens:"desc" };
            callBD("phpsql/mysql_getLivres.php", "POST", "json", tabInput, "vueLivres");
        } catch (er) {
            log(0, "ERROR(afficheLivres):" + er.message);
        }
    }
    
    function ajouterLivre() {
        try {
            var v_titre = $("#titre").val();
            var v_dateParution = $("#dateParution").val();
            var v_donateur = $("#donateur").val();
            var v_resume = $("#resume").val();
            
            var controle = false;
            var strMsgChamps = "";
            if((g_tab_testInput["titre"]&&g_tab_testInput["dateParution"])){
                controle = true;
            }else{
                strMsgChamps = "Vous devez remplir soit le titre et la date de parution.";
            }
            
            if(controle){
                $("#msgRetour").text("");
                var tabInput = { titre:v_titre, dateParution:getStrDateUsFromFr(v_dateParution), donateur:v_donateur, resume:v_resume };
                callBD("phpsql/mysql_insertLivre.php", "POST", "json", tabInput, "retourInsertLivre");
            }else{
                $("#msgRetour").css("color", g_couleurFontMauvais);
                $("#msgRetour").html("<b>"+strMsgChamps+"</b>");
            }
        } catch (er) {
            log(0, "ERROR(ajouterLivre):" + er.message);
        }
    }
    
    function retourInsertLivre(p_retour) {
        try {
            if(p_retour["data"]["strErreur"] == "") {
                notification("Cr&eacute;ation r&eacute;ussi.",_SUCCESS);
                afficheLivres();
            }else{
                notification("Erreur dans la cr&eacute;ation.("+p_retour["data"]["strErreur"]+")",_ALERT);
            }
        } catch (er) {
            log(0, "ERROR(retourInsertLivre):" + er.message);
        }
    }
    
    function delLivre(p_id) {
        try {
            $("#msgRetour").text("");
            var tabInput = { id:p_id };
            callBD("phpsql/mysql_deleteLivre.php", "POST", "json", tabInput, "retourDeltLivre");
        } catch (er) {
            log(0, "ERROR(delLivre):" + er.message);
        }
    }
    
    function retourDeltLivre(p_retour) {
        try {
            if(p_retour["data"]["strErreur"] == "") {
                notification("Suppression r&eacute;ussi.",_SUCCESS);
                afficheLivres();
            }else{
                notification("Erreur dans la Suppression.("+p_retour["data"]["strErreur"]+")",_ALERT);
            }
        } catch (er) {
            log(0, "ERROR(retourDeltLivre):" + er.message);
        }
    }

    ///////////////////
    //BLOCK FONCTIONS AFFICHAGE
    ///////////////////
    function vueLivres(p_tabLivres){
        try {
            var tabLivres = p_tabLivres["data"]["resultat"]["data"];
            var strhtml = "";

            strhtml += "<table id=\"tabLaListe\" data-role=\"table\" data-mode=\"reflow\" class=\"table-stripe ui-responsive\">";
            strhtml += "<thead>";
            strhtml += "<TR class=\"ui-bar-d\">";
            strhtml += "<TH>Id</TH>";
            strhtml += "<TH>Titre</TH>";
            strhtml += "<TH>Date parution</TH>";
            strhtml += "<TH>Actif</TH>";
            strhtml += "<TH>Actions</TH>";
            strhtml += "</thead>";
            strhtml += "<tbody>";
            for (var indice in tabLivres) {
                strhtml += "<TR onMouseOver=\"changeCouleur(this);\" onMouseOut=\"remetCouleur(this);\" >";
                strhtml += "<TD>"+tabLivres[indice]["id"]+"</TD>";
                strhtml += "<TD>"+tabLivres[indice]["titre"]+"</TD>";
                strhtml += "<TD>"+getStrDateFrFromUs(tabLivres[indice]["date_parution"])+"</TD>";
                strhtml += "<TD>";
                if(tabLivres[indice]["actif"]=="1"){
                    strhtml += "Oui";
                }else{
                    strhtml += "Non";
                }
                strhtml += "</TD>";
                strhtml += "<TD>";
                strhtml += '<a href="#" onclick="window.location = (\'./page_edit_livre.html?mili='+getMilise()+'&id='+tabLivres[indice]["id"]+'\');" class="ui-btn ui-corner-all ui-btn-inline ui-icon-edit ui-btn-icon-notext" title="Editer article">Editer article</a>';
                strhtml += '<a href="#" onclick="delLivre('+tabLivres[indice]["id"]+');" class="ui-btn ui-corner-all ui-btn-inline ui-icon-delete ui-btn-icon-notext" title="Retirer article">Retirer article</a>';
                strhtml += "</TD>";
                strhtml += "</TR>";
            }
            strhtml += "</tbody>";
            strhtml += "</table>";
            
            $('#div_Livres').html(strhtml).trigger('create');
        } catch (er) {
            log(0, "ERROR(vueLivres):" + er.message);
            return "";
        }
    }

    ///////////////////
    //BLOCK FONCTIONS BD
    ///////////////////		
    </script>
	
  </head>
  <body onload="OnLoad();">
    
    <!-- page -->
    <div data-role="page" data-title="Titre">

        <!-- /panel -->
        <div data-role="panel" id="mypanel" data-display="overlay" data-position="left">

        </div>
        <!-- /panel -->

        <!-- header -->
        <div data-role="header" data-position="fixed">
            <a href="#mypanel" data-role="button" data-icon="home" data-iconpos="notext">home</a>
            <h1 id="id_titre">titre</h1>
            <a href="javascript:window.location = ('./page_contact.html?mili='+getMilise());" data-role="button" data-icon="info" data-iconpos="notext">Contact</a>
        </div>
        <!-- /header -->

        <!-- content -->
        <div data-role="content" id="main_content">
                <div data-role="collapsible" data-collapsed="true" data-mini="true" id="content_ajoutLivres">
                    <h4>Ajouter un livre &agrave; l'inventaire</h4>
                    <form action="" method="post" name="form" id="form">
                        <div data-role="fieldcontain" data-mini="true">
                            <div class="ui-grid-a">
                                <div class="ui-block-a">
                                    <label for="titre" id="label_titre" style="width: 75%">Titre* :</label><br>
                                    <input type="text" name="titre" id="titre" value="" data-mini="true" placeholder="Titre ici" onkeyup="ecoute(this, event.keyCode);" onblur="onblurInput(this);" onfocus="onfocusInput(this);"/><br>
                                    <label for="titre" id="tips_titre" style="width: 75%"></label><br>
                                    <label for="dateParution" id="label_dateParution" style="width: 75%">Date de parution* :</label><br>
                                    <input type="text" name="dateParution" id="dateParution" value="" data-mini="true" placeholder="dd/mm/yyyy" onkeyup="ecoute(this, event.keyCode);" onblur="onblurInput(this);" onfocus="onfocusInput(this);"/><br>
                                    <label for="dateParution" id="tips_dateParution" style="width: 75%"></label><br>
                                </div>
                                <div class="ui-block-b">
                                    <label for="donateur" id="label_donateur" style="width: 75%">Le donateur :</label><br>
                                    <input type="text" name="donateur" id="donateur" value="" data-mini="true" placeholder="Nom du donateur ici" onkeyup="ecoute(this, event.keyCode);" onblur="onblurInput(this);" onfocus="onfocusInput(this);"/><br>
                                    <label for="donateur" id="tips_donateur" style="width: 75%"></label><br>
                                    <label for="resume" id="label_resume" style="width: 75%">Le r&eacute;sum&eacute; :</label><br>
                                    <input type="text" name="resume" id="resume" value="" data-mini="true" placeholder="R&eacute;sum&eacute; ici" onkeyup="ecoute(this, event.keyCode);" onblur="onblurInput(this);" onfocus="onfocusInput(this);"/><br>
                                    <label for="resume" id="tips_resume" style="width: 75%"></label><br>
                                </div>
                            </div>
                        </div>		
                        <a href="javascript:ajouterLivre();" data-role="button" data-inline="true" data-icon="arrow-r" data-mini="true" id="submit">Soumettre</a>					
                        <label id="msgRetour"></label>
                    </form>
                </div>

                <div data-role="collapsible" data-collapsed="false" data-mini="true" id="content_Livres">
                    <h4>Inventaire des livres</h4>
                    <center>
                        <label id="msgRetourDivLivres" style="width: 75%"></label>
                        <div id="div_Livres">la liste est vide.</div>
                    </center>
                </div>
        </div>
        <!-- /content -->

        <!-- footer -->
        <div data-role="footer" data-position="fixed">
            <a data-role="button" data-icon="search" data-iconpos="notext" class="ui-btn-left" href="javascript:window.location = ('./page_faq.html?mili='+getMilise());">FAQ</a>
            <h1 id="id_affichageUser">User</h1>
            <a data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right" href="javascript:window.location = ('./page_sortie.html?mili='+getMilise());">Logout</a>
        </div>
        <!-- /footer -->

    </div>
    <!-- /page -->
</body>
</html>